<template>
	<!-- 顶部导航 -->
	<div class="top-nav">
	  <el-menu :default-active="$route.path" router mode="horizontal">
		<el-menu-item v-for="(item, i) in tabitem" :key="i" :index="item.path">
		  {{ item.name }}
		</el-menu-item>
	  </el-menu>
	</div>
  </template>
  
  <script>
  export default {
	name: "TopNav",
	props: {
	  tabitem: {
		type: Array,
		default() {
		  return [];
		},
	  },
	},
};


  </script>

<style lang="less" scoped>
.top-nav {
	display: flex;
	width: 100%;
	justify-content: center;
}
.el-menu {
	border: 0;
	gap:80px;
	// padding: 60px;
}
.el-menu-item {
	color: #303133;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	background-color: transparent !important; /* 去掉默认背景颜色 */
}
.el-menu--horizontal > .el-menu-item.is-active {
	border-bottom: 3px solid var(--mycompColor);
	font-size: 18px;
	color: var(--mycompColor)!important;
}

/* 去掉鼠标悬停时的背景颜色 */
.el-menu-item:hover {
	background-color: transparent !important; /* 去掉默认的悬停背景颜色 */
	color: var(--mycompColor) !important; /* 悬停时改变文字颜色，防止显示蓝色 */
}
</style>
